<template>
  <component :is="icon" v-if="icon" :size="size" :color="color" />
  <span v-else class="icon-placeholder" :style="{ fontSize: size + 'px', color }"></span>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import * as Icons from '@element-plus/icons-vue';

const props = defineProps({
  // 图标名称
  name: {
    type: String,
    required: true
  },
  // 图标大小
  size: {
    type: [Number, String],
    default: 16
  },
  // 图标颜色
  color: {
    type: String,
    default: ''
  }
});

// 图标组件引用
const icon = computed(() => {
  if (!props.name) return null;
  
  // 处理不同格式的图标名称（支持 icon-xxx 或 IconXxx 格式）
  const iconName = props.name
    .replace(/^icon-/, '') // 移除前缀 icon-
    .replace(/\b\w/g, l => l.toUpperCase()) // 将每个单词首字母大写
    .replace(/-/g, ''); // 移除连字符
  
  return Icons[iconName] || null;
});

// 在控制台警告无效的图标名称
onMounted(() => {
  if (props.name && !icon.value) {
    console.warn(`Icon "${props.name}" not found in @element-plus/icons-vue`);
  }
});
</script>

<style scoped>
.icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}
</style> 